<template>
	<view>
		<!-- 商家信息 -->
		
		<view class="bg-white"  @tap="toUserMain(shopper_msg.user_id)">
		  <view class=" cf padding-sm">
		    <view class="radius fl padding-sm ">
		      <image :src="shopper_msg.icon" ></image>
		      <view class="fr padding-name">
		        <view>{{shopper_msg.user_name}}</view>
		        <view>
		          <text>{{shopper_msg.address}}</text>
		        </view>
		      </view>
		    </view>
		    <view class=" fr padding-time ">
		      <text>{{shopper_msg.time}}</text>
		    </view>
		  </view>
		</view>
		
		<!-- 商家信息end -->
		
		<!-- 商品内容 -->
		<view class='contanier bg-white padding-sm top-20' >
		  <view class='price'>
		    <text class='price-symbol'>￥</text>
		    <text class='price-size'>{{shopper_msg.price}}</text>
		    <text class='price-ori'>￥{{shopper_msg.raw_price}}</text>

		  </view>
		
		  <view class='bg-white top-20 font-size'>
		    <text>
				{{shopper_msg.product_content}}
			</text>
		  </view>
		<view class='hint'>
		  <text>联系电话：{{shopper_msg.phone}}</text>
		</view>
		  <!-- 交易方式 -->
		  <view class='hint'>
		    <text>本交易仅支持{{shopper_msg.trade_types}}</text>
		  </view>
		  <!-- end -->
		
		  <!-- 图片位置 -->
		  <block v-for="(item,index) in shopper_msg.imgs" :key="index">
		    <image class='img' :src='item'></image>
		  </block>
		  <!--图片位置end  -->
		
		  <view class='browse'>
		    <view>
		      <text></text>
		      <!-- <text>担保交易</text> -->
		    </view>
		    <view class="text-gray text-sm text-right padding-browse"  style="margin-bottom: 20%;">
		      <text class="cuIcon-attentionfill margin-lr-xs"></text>{{shopper_msg.view_count}}

		    </view>
		
		  </view>
		
		</view>
		<!-- 商品内容end -->
		
		<!-- 商家信息 -->
<!-- 		<view class='bg-white top-20 padding-sm '>
		  <view class='in_regard_to'>
		    <view>

		    </view>
		    <view>
		      <text class='in_regard_to_text'>关于卖家</text>
		    </view>
		  </view> -->
		
<!-- 		<navigator url='/pages/my/my_detail/my_detail'>
		  <view class="cu-list menu-avatar">
		    <view class="cu-item arrow ">

				<image  class="cu-avatar round lg" :src="shopper_msg.icon" mode=""></image>

		      <view class="content">
		        <view class="text-grey">{{shopper_msg.user_name}}</view>

		      </view>
		      <view class="action arrow">
		        <view class="cuIcon-right"></view>
		      </view>
		    </view>
		  </view>
		  </navigator> -->
		
<!-- 		  <view class='bg-gray top-30 information ' style="margin-bottom: 20%;">
		
		    <view class='Business_information'>
		      <view>5</view>
		      <view>
		        <text>在售宝贝</text>
		      </view>
		    </view>
		
		    <view class='Business_information'>
		      <view>5</view>
		      <view>
		        <text>累计交易</text>
		      </view>
		    </view>
		
		

		  </view> -->
		
		
		
		

<!-- 		</view> -->
		

		
		
		<!-- 操作选项卡 -->
		  <view class="cu-bar bg-white tabbar border shop fixation">
		    <button class="action" @tap="toChat">
		      <view class="cuIcon-service text-green">
<!-- 		        <view class="cu-tag badge"></view> -->
		      </view>
		      聊一聊
		    </button>

		
		    <view class="buy" @tap="buy" style="">立即购买</view>
		  </view>
		<!-- end -->
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				  _id:"",
				  shopper_msg:'',
				  url:'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg',
			}
		},

		onLoad:function(options){
			this._id=options._id;
			this.loadMsg(this._id);
			this.addViewCount(this._id);
		},
		methods: {
			toUserMain(id){
				uni.navigateTo({
					url:"../../user-detail/user-detail?user_id="+id
				})

			},
			loadMsg(_id){
				uni.showLoading();
				
				setTimeout(function () {
					uni.hideLoading();
				}, 2000);
				let that=this;
				uniCloud.callFunction({
					name:"getProdectById",
					data:{"_id":_id},
					success(res) {
						let msg=res.result.msg;
						let l=res.result.msg.imgs;
						for(let i=0; i<l.length; i++){
							
							l[i]="https://7463-tcb-ifefi2k5rw3qd7x53f623-663bf2-1303864694.tcb.qcloud.la/"+l[i];

						}
						msg.imgs=l;
						msg.view_count=parseInt(msg.view_count)+1;
						that.shopper_msg=msg;
						console.log(that.shopper_msg)
					}
				})
			},
			// 点击跳转订单详细页面
			buy:function(e){
				
				uni.navigateTo({
					url:"/pages/home/confirm_order/confirm_order?product_id="+this.shopper_msg._id+"&price="+this.shopper_msg.price+"&raw_price="+this.shopper_msg.raw_price+"&preview="+this.shopper_msg.imgs[0]+"&sailer_id="+this.shopper_msg.user_id+"&title="+this.shopper_msg.
product_title
				});
			},
			toChat:function(){
				 uni.navigateTo({
					url:"../../msg/msg_chat/msg_chat?friend_id="+this.shopper_msg._id+"&friend_name="+this.shopper_msg.user_name+"&icon="+this.shopper_msg.icon
				 })
			},
			addViewCount(_id){
				uniCloud.callFunction({
					name:"addViewCount",
					data:{"_id":_id},
					success(res) {
						console.log(res)
					}
				})
			}
		}
	}
</script>

<style>
/* 商家信息 */
.buy{
	width: 60%;
	color: #fff;
	font-size: 18px;
	text-align: center;
	padding-top: 3%;
	margin-right: 1%;
	height: 50px;
	background: #d23437;
}
.padding-name{
  padding-top: 25rpx;
  padding-left: 20rpx;
}
.padding-name text{
  color: gray;
  font-size: 20rpx;
}
.fl image{
  width: 100rpx;
  height: 100rpx;
  border-radius: 100%;
}
.padding-time{
  padding-top: 45rpx;
}
text-title-size{
  font-size: 50rpx;
  color: gray;
}
/* 商家信息end */

/* 商品内容 */
.top-20{
margin-top: 20rpx;
}

.price-size{
  font-size: 50rpx;
  color: red;
}
.price-symbol{
  font-size: 20rpx;
  color: red;
}
.price-ori{
  margin-left: 25rpx;
  text-decoration: line-through;
}
.font-size text{
  font-size: 35rpx;
  color: black;
}
.hint{
  margin-top: 20rpx;
  color: black;
  font-size: 35rpx;
}
.img{
  margin-top: 10rpx;
  width: 100%;
  height: 800rpx;
}
.cu-tag{
  margin-left: 20rpx;
  /* padding: 0rpx; */
  font-size: 22rpx;
}
.browse{
  display: flex;
  justify-content: space-between;
}
.browse-tiem{
  font-size: 23rpx;
  color: gray;
}
.padding-browse{
  padding: 10rpx;
}
/* 商品内容end */

/* 商家信息 */
.in_regard_to{
  display: flex;
  align-items: center;
}
.in_regard_to image{
  width: 50rpx;
  height: 65rpx;
}
.in_regard_to_text{
  font-size: 35rpx;
  color: black;
  font-family: inherit;
}
.top-30{
  margin-top: 30rpx;
  
}
.Business_information{
  /* width: 30%; */
  padding: 5rpx;
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;

}
.information{
  /* border-top-left-radius: 5%;
  border-top-right-radius: 5%; */
  border-radius: 20rpx;
  padding: 10rpx;
  display: flex;
  justify-content: space-around;
}
.item-inline{
display: inline-block;
margin-right: 10rpx;
height: 150rpx;
width: 230rpx;
}

/* end */

/* 消息 */
.msg{
  display: flex;
}
.msg-conetent{
  margin-left: 30rpx;
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    margin-top: 10rpx;
    width: 80%;
}
.msg-timer{
 padding-left: 20rpx;
}
.msg-timers{
  color: gray;
  font-size: 22rpx;
}
/* end */



/* 相似商品 */
.container{
  margin-left: 29rpx;
  margin-right: 20rpx;
  /* float: left; */
  height: 530rpx;
  width: 43%;
  background: white;
  margin-bottom: 20rpx;
  
}
.container_img image{
  height: 300rpx;
  width: 100%;
}
.container_text{
  color: black;
  padding: 10rpx;
  font-size: 23rpx;
}
.container_price{
  display: flex;
  justify-content: space-between;
  padding-left: 8rpx;
  padding-right: 8rpx;
}
.container_price_text_0{
  color: red;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.container_price_text_1{
  font-size: 22rpx;
}
.container_line{
  width: 100%;
  background: gainsboro;
  height: 1rpx;
  margin-top: 10rpx;
}
.container_user{
  margin-top: 20rpx;
  display: flex;
  line-height:50rpx;
}
.container_user image{
  margin-left: 10rpx;
  margin-right: 50rpx;
  height: 50rpx;
  width: 50rpx;
}
.container-flex{
  display: flex;
  flex-wrap: wrap;
}
/* end */

/* 底部操作选项卡 */
.fixation{
  position: fixed;
  bottom: 0rpx;
  width: 100%;
}
.margin-rigth-20{
  margin-right: 20rpx;
}
/* end */
</style>
